<template>
	<!-- 待右侧文字标题的顶部导航栏组件 -->
	<!--   uView V2.0.34 %c https://uviewui.com/    v1版本需要对照v1设置对应属性 -->
	<view class="header">
		<u-navbar :title="title" :bgColor="background" :autoBack="isBack" :leftIconSize="leftIconSize" :leftIconColor="leftIconColor" :titleStyle="titleStyle "
			:border="borderBottom" :leftText="leftText" :rightText="rightText" :fixed="isFixed" :placeholder="placeholder" :titleWidth="titleWidth" :height="height"
		  :safeAreaInsetTop="safeAreaInsetTop"	@leftClick="onClickLeft" @rightClick="onClickRight" ref="uNavbar">
			<view :style="{width: screenWidth + 'px'}" class="u-nav-slot" slot="left" style="display: flex;justify-content: space-between;"  >
				<u-icon name="arrow-left" size="19"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
					<image style="width: 50rpx;height: 50rpx;" :src="rightIcon" mode=""></image>
			</view>
		</u-navbar>
	</view>
</template>

<script>
	export default {
		name: 'header-title',
		props: {
			// 判断返回标准
			backType:{
				type:Boolean,
				default:false
			},
			leftText:{//左边的提示文字
				type: String,
				default: ''
			},
			rightText:{//右边的提示文字
				type: String,
				default: ''
			},
			title: { //标题内容
				type: String,
				default: '',
			},
			rightContent: {
				type: String, //右侧字体
				default: '',
			},
			screenWidth:{
					type:Number,//屏幕宽度
			},
			rightIcon: {
				type: String, //右侧图标
				default: '../../static/add.png', 
			},
			isBack: { //点击左侧区域(返回图标)，是否自动返回上一页 uview2.0.19
				type: Boolean,
				default: true,
			},
			safeAreaInsetTop:{//是否开启顶部安全区适配
				type: Boolean,
				default: true,
			},
			placeholder:{//固定在顶部时，是否生成一个等高元素，以防止塌陷
				type: Boolean,
				default: true,
			},
			leftIconSize:{//左侧返回图标的大小
				type:Number,
				default:23
			},
			leftIconColor:{
				type: String, //左侧返回图标的颜色
				default: '#303133',
			},
			background: { //背景设置
				type: String,
				default: "#FFF",
			},
			textColor: { //标题文字颜色
				type: String,
				default: '#323233',
			},
			borderBottom: { //导航栏底部是否显示下边框
				type: Boolean,
				default: false,
			},
			titleWidth: { //导航栏标题的最大宽度，内容超出会以省略号隐藏，单位rpx
				type: Number,
			},
			height:{//导航栏高度(不包括状态栏高度在内，内部自动加上)，单位px
				type: Number,
			},
			isFixed: { //头部是否固定
				type: Boolean,
				default: true
			},
			titleStyle:{//标题的样式，对象或字符串形式 uview2.0.23
				type:Object,
				default:()=>{}
			},
		},
		data() {
			return {};
		},
		computed: {},
		watch: {},
		created() {},
		methods: {
			// 返回点击
			onClickLeft() {
				console.log('返回点击')
				if(this.backType==true){
					this.$emit('onClickLeft')
					// uni.navigateTo({
					// 	url:'/pages/user/user'
					// })
				}else{
					uni.navigateBack({
						delta:1
					})
				}
				
			},
			onClickRight() {},
			navbarHeight() {
				return this.$refs.uNavbar.navbarHeight;
			},
			navbarInnerStyle() {
				return this.$refs.uNavbar.navbarInnerStyle;
			},
			selectRightIconChange() {
				this.$emit('selectRightIconChange')
			}
		},
	};
</script>

<style scoped lang='scss'>
	.header {
		width: 100%;

		.content {
			text-align: center;
			transform: translateX(-200upx);
		}
	}

	/deep/ .u-navbar-inner {
		display: flex;
		justify-content: center;
	}

	.rightContent {
		width: 100upx;
		height: 88upx;
		line-height: 88upx;
		/* margin-right: 20upx; */
		font-size: 26upx;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		image {
			vertical-align: middle;
			width: 55upx;
			height: 55upx;
			margin-left: 5rpx;
		}
	}
</style>